// @ts-nocheck
import {useState, useRef} from 'react'
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import {
  Button,
  Popconfirm as Confirm,
  Divider,
  message
} from 'antd'
import {PlusOutlined} from '@ant-design/icons'
import ProTable from '@ant-design/pro-table'
import CreateModify from './extra/createModify'
import {querySubDistrict, delSubDistrict} from '@/services/subDistrict'
import {authority} from "@/tools/tool";
import {useModel, Access} from 'umi'
import DistrictSelect from '@/components/Select/DistrictSelect'

const Index = () => {
  const init = useModel('@@initialState');
  const {currentUser} = init.initialState
  const [visible, setVisible] = useState(false)
  const [data, setData] = useState({})
  const [mode, setMode] = useState('create')
  const actionRef = useRef()
  const columns = [
    {
      title: '街道名称',
      dataIndex: 'name',
    },
    {
      title: '所属区域',
      dataIndex: 'district_id',
      renderFormItem:()=> <DistrictSelect />,
      render:(_,row)=>row.district_name
    },
    {
      title: '操作',
      width: 150,
      valueType: 'option',
      render: (_: any, row: any) => [
        <Access key={'1'} accessible={authority('17', currentUser.operation)}>
          <a  onClick={() => {
            setMode('modify');
            setData(row);
            setVisible(true)
          }}>
            编辑
          </a>
        </Access>,
        <Divider key={'2'} type="vertical"/>,
        <Access key={'3'} accessible={authority('18', currentUser.operation)}>
          <Confirm
            title="确认删除当前街道吗?"
            okText="确认"
            onConfirm={() => delSubDistrict({subdistrict_id: row.subdistrict_id}).then(res => {
              if (res.status === 200) {
                message.success(res.message).then()
                actionRef.current.reload()
              } else {
                message.error('删除失败！').then()
              }
            })}
            cancelText="取消"
          >
            <a>删除</a>
          </Confirm>
        </Access>

      ],
    },
  ]
  return (
    <PageHeaderWrapper>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={(params) => querySubDistrict({...params})}
        toolBarRender={() => [
          <Access key={'1'} accessible={authority('16', currentUser.operation)}>
            <Button key="button" icon={<PlusOutlined/>} type="primary" onClick={() => {
              setMode('create');
              setVisible(true)
            }}>
              新建街道
            </Button>
          </Access>
        ]}
      />
      <CreateModify
        mode={mode}
        visible={visible}
        data={data}
        onClose={() => setVisible(false)}
        onOk={() => {
          setVisible(false);
          actionRef.current.reload()
        }}
      />


    </PageHeaderWrapper>
  );
};

export default Index;
